
<template>
  <div id="couponD">
    <div class="top">
      乐福卡
    </div>
    <div class="middle">
      <h5>有效期至{{date}}</h5>
      <div>
        剩余可用
        <span>￥{{use}}</span>
      </div>
      <div>
        总金额
        <span>￥{{total}}</span>
      </div>
      <a href="javascript:;" @click="couponDRange">限定范围>></a>
    </div>
  </div>
</template>

<script>
export default {
  name: "couponD",
  data() {
    return {
      date: '',
      use: '',
      total:'',
      useRangeDetail: ''
    };
  },
  mounted() {
    this.findEsCouponById()
  },
  created() {},
  methods: {
    couponDRange(){
      localStorage.setItem('couponDRange',this.useRangeDetail)
      this.$router.push('./couponDRange')
    },
    findEsCouponById(){
      let url =
        this.$CONSTANT.COUPON.findEsCouponById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: this.$route.query.id,
        userId: localStorage.getItem('userId')||''
      };
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.use = bussData.restPrice
          this.total = bussData.price
          this.date = bussData.validTime
          this.useRangeDetail = bussData.useRangeDetail
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    }
  },
  components: {}
};
</script>

<style lang="less">
#couponD {
  background: #ec1b24;
  height: 100%;
  .top {
    position: absolute;
    top: 38px;
    left: 50%;
    margin-left: -38.5px;
    width: 20.5%;
    height: 77px;
    text-align: center;
    line-height: 77px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-family: PingFang-SC-Bold;font-weight: 600;
    box-shadow: 1px 1px 1px #f1e5e5;
    z-index: 9999;
  }
  .middle {
    margin: 0 auto 0;
    padding: 0 17px;
    width: 88%;
    height: 381px;
    background: #fff;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    top: 79px;
    h5 {
      color: #999;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
      margin: 50px 0;
      text-align: center;
    }
    div {
      color: #999;
      font-size: 15px;
      font-family: PingFang-SC-Medium;
      border-bottom: 1px solid #d5d5d5;
      height: 56px;
      line-height: 56px;
      span {
        float: right;
        color: #ec1b24;
        font-size: 15px;
        font-family: PingFang-SC-Bold;font-weight: 600;
      }
    }
    a{
      position: absolute;
      bottom: 29px;
      left: 20px;
      color: #999;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
    }
  }
}
</style>
